<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>出库统计</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <script src="../../layui/layui.js"></script>
    <script src="../../js/echarts.min.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="border-radius: 0;border-top: 4px solid #d2d2d2;">
            <div class="layui-inline">
                <label class="layui-form-label">药品分类</label>
                <div class="layui-input-inline">
                    <select>
                        <option value="">请选择</option>
                        <option value="AAA">药品 A</option>
                        <option value="BBB">药品 B</option>
                        <option value="CCC" selected>药品 C</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">药品名称</label>
                <div class="layui-input-inline">
                    <select>
                        <option value="">请选择</option>
                        <option value="AAA">药品 A</option>
                        <option value="BBB">药品 B</option>
                        <option value="CCC" selected>药品C</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">入库日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" placeholder="2022-11-20" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-sysuser-front-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="layui-card-body" style="display: flex; justify-content: center;">

<!--        <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table>-->

        <script type="text/html" id="table-useradmin-webuser">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
        </script>

        <!--状态判断-->
        <script type="text/html" id="statusTpl">
            {{#  if(d.status == 1){ }}
            <button class="layui-btn layui-btn-xs">正常</button>
            {{#  } else if(d.status == 2) { }}
            <button class="layui-btn layui-btn-primary layui-btn-xs">冻结</button>
            {{#  } }}

        </script>

        <!--  创建时间格式化处理 -->
        <script type="text/html" id="createTimeTpl">
            {{formatDate(d.createTime)}}
        </script>

        <!--  更新时间格式化处理 -->
        <script type="text/html" id="updateTimeTpl">
            {{formatDate(d.updateTime)}}
        </script>

    </div>
</div>
</div>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <table class="layui-table" id="chukuTable" lay-filter="chukuTable"></table>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md12" id="chukuTablePage"></div>
    </div>
</div>
<div class="layui-col-md12" >
    <div class="layui-card">
        <div class="layui-card-header" >数据概览</div>
        <div class="layui-card-body">
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="main" style="width: 600px; height: 400px; margin: 0 auto;"></div>
        </div>
    </div>
</div>
<script>
    layui.use(['table', 'layer', 'jquery', 'laypage'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;

        var tableHead = '<thead>' +
            '<tr>' +
            '<th>Id</th>' +
            '<th>药品名称</th>' +
            '<th>出库数量</th>' +
            '<th>出库时间</th>' +
            '<th>负责人</th>' +
            '</tr>' +
            '</thead>';

        // 渲染表格和分页
        table.render({
            elem: '#chukuTable',
            cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'id', title: 'Id', width: 150 },
                { field: 'name', title: '药品名称', width: 150 },
                { field: 'billNumber', title: '入库数量', width: 150 },
                { field: 'billTime', title: '入库时间', width: 200 },
                { field: 'leader', title: '负责人', width: 150 },
                { field: 'price', title: '单据号', width: 150 },
            ]],
            url: '/inventory/allchuku', // 请求后台接口获取数据
            done: function (res) {
                console.log(res)
                if (res.length > 0) {
                    var chukuData = res;
                    var html = '';
                    for (var i = 0; i < chukuData.length; i++) {
                        var sales = chukuData[i];
                        var shijian = new Date(sales.billTime);
                        var formattedDate = shijian.getFullYear() + '-' + (shijian.getMonth() + 1).toString().padStart(2, '0') + '-' + shijian.getDate().toString().padStart(2, '0');
                        html += '<tr>';
                        html += '<td style="width: 150px;">' + sales.id + '</td>';
                        html += '<td style="width: 150px;">' + sales.name + '</td>';
                        html += '<td style="width: 150px;">' + sales.billNumber + '</td>';
                        html += '<td style="width: 200px;">' + formattedDate + '</td>';
                        html += '<td style="width: 150px;">' + sales.leader + '</td>';
                        html += '</tr>';
                    }
                } else {
                    layer.msg(res.message, { icon: 2 });
                }
                $("#chukuTable").html(tableHead + html);
            }
        });
    });
</script>
<script type="text/javascript">
    // 日期格式转换函数
    function formatDate(str) {
        if(str != null){
            var now = new Date(str);
            var year = now.getFullYear();  //取得4位数的年份
            var month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
            var date = now.getDate();      //返回日期月份中的天数（1到31）
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            return year + "-" + month + "-" + date +" "+hours+":"+minutes+":"+seconds;
        }
        return "";
    }
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '入库统计'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ['大力丸', '999感冒灵', '乳酸菌片', '维生素c片', '肠胃药', '来曲唑片']
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 10, 16, 10, 10, 20]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>